<template>
	<view class="publish">
		<view class="header-row border-radius-sm">
			<view class="address" @click.prevent="handleSelAddress">
				<text class="address-placeholder">{{orderForm.address}}</text>
				<text class="select-address" @click.stop="handleSelectOption">选择地址</text>
				<uni-popup ref="popup" type="bottom">
					<view class="address-dialog">
						<view class="plus-row" @click="handlePlusAddress">
							<uni-icons type="plusempty" color="#3B73FF" size="14"></uni-icons>
							<text>新增地址</text>
						</view>
						<view class="address-list">
							<view
								v-for="item in addressList"
								:key="item.id"
								:class="currAddress && currAddress.id === item.id ? 'address-item border-radius-sm active-item' : 'address-item border-radius-sm'"
								@click="handleCheckAddress(item)"
							>
								<text class="address-item-info">姓名：{{item.name}}</text>
								<text class="address-item-info">电话：{{item.phone}}</text>
								<text class="address-item-info">地址：{{`${item.city}${item.district}${item.address}`}}</text>
							</view>
						</view>
					</view>
				</uni-popup>
				<LbPicker ref="picker" v-model="orderForm.address" :list="listCityData" :level="3" mode="multiSelector" @confirm="handleConfirm"
				 confirm-color="#3B73FF" />
			</view>
			<view class="prod-type">
				<view v-for="item in types" :key="item.value" @click="handleCheckType(item)" class="type-item">
					<view :class="orderForm.type === item.value ? 'type-item-wrap border-radius-sm active-item' : 'type-item-wrap border-radius-sm'">
						<text>{{ item.label }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="publish-content border-radius-sm">
			<view class="create-time-row">
				<!-- <text class="time-text">预约时间</text>
				<text class="date-time">
					{{orderForm.createTime}}
					<uni-icons type="arrowright" size="30"></uni-icons>
				</text> -->
				<view class="create-time-wrap">
					<text class="time-title">预约时间</text>
					<DatePicker placeholder="请选择预约时间" :start="startTime" style="color: #808080;font-size: 24rpx" @change="handleChangeCreateTime" />
				</view>
			</view>
			<view class="weight-row">
				<text class="weight-title">预计重量</text>
				<view class="weight-list">
					<view v-for="item in weights" :key="item.value" @click="handleCheckWeight(item)" class="weight-item">
						<view :class="orderForm.weight === item.value ? 'weight-item-wrap border-radius-sm active-item' : 'weight-item-wrap border-radius-sm'">
							<text>{{item.label}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="remark-row">
				<text class="remark-title">备注</text>
				<textarea v-model="orderForm.remark" auto-height class="remark-ipt border-radius-sm" />
				</view>
			<view class="photo-row">
				<view class="photo-title-row">
					<text class="photo-title">上传照片</text>
					<text class="photo-num">{{fileList.length}}/3</text>
				</view>
				<view class="photo-list">
					<view v-if="orderForm.imageList.length" class="image-list">
						<ImageItem
							v-for="item in orderForm.imageList"
							class="image-item-wrap"
							:key="item.uuid"
							:uuid="item.uuid"
							:src="item.url"
							@delete="handleDelPhoto"
						/>
					</view>
					<view  v-if="orderForm.imageList.length < 3" class="photo-plus border-radius-sm" @click="handleSelPhoto">
						<uni-icons type="camera-filled" size="40" color="#808080"></uni-icons>
					</view>
				</view>
			</view>
		<view class="publish-row">
			<button class="btn-assist block" @click="handlePublish">立即下单</button>
		</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	import LbPicker from '@/components/lb-picker/index.vue'
	import DatePicker from '@/components/datetime-picker/datetime-picker.vue'
	import ImageItem from '@/components/cu-image-item/cu-image-item.vue'
	import dayjs from 'dayjs'
	import cityData from '@/utils/city.js'
	import config from '@/api/config.js'

	export default {
		components: {
			LbPicker,
			DatePicker,
			ImageItem
		},
		data() {
			return {
				orderForm: {
					address: "请选择回收地址",
					type: 1,	// 类型
					weight: 1, // 重量
					remark: undefined, // 备注
					crreateTime: undefined, // 创建时间
					imageList: [] // 已上传文件列表
				},
				addressTexts: [],
				listCityData: cityData, // 三级联动省市区数据
				num: 0, // 已选择图片数量
				fileList: [], // 图片列表
				currAddress: undefined,
				addressList: []
			};
		},
		computed: {
			...mapGetters(['types', 'weights']),
			startTime() {
				return dayjs(new Date()).format('YYYY-MMM-DD HH:mm')
			}
		},
		onShow() {
			this.getAddressList()
		},
		methods: {
			// 查询用户地址信息
			getAddressList() {
				this.$request.address.queryAddressList()
					.then(res =>{
						if(res.status === 200) {
							this.addressList = res.data
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
						}
					})
					.catch(() => {
						uni.showToast({
							title: '获取数据失败',
							icon: 'none'
						})
					})
			},
			// 选择商品类型
			handleCheckType(row) {
				this.orderForm.type = row.value;
			},
			// 选择地址
			handleSelAddress() {
				// this.$refs.picker.show()
			},
			// 选中地址
			handleConfirm(e) {
				this.addressTexts = e.item.map(item =>item.label)
			},
			// 新增地址
			handlePlusAddress() {
				uni.navigateTo({
					url: '../address/create/create'
				})
			},
			// 地址簿选中
			handleCheckAddress(row) {
				this.currAddress = row
				this.orderForm.address = `${row.city}${row.district}${row.address}`
				this.$refs.popup.close()
			},
			// 地址簿选择
			handleSelectOption() {
				this.$refs.popup.open()
			},
			// 选择时间
			handleChangeCreateTime(date) {
				const { YYYY, MM, DD, hh, mm } = date
				this.orderForm.createTime = new Date(`${YYYY}-${MM}-${DD} ${hh}:${mm}`).getTime()
			},
			// 选择商品重量
			handleCheckWeight(row) {
				this.orderForm.weight = row.value
			},
			// 选择上传图片
			handleSelPhoto() {
				const self = this
				uni.chooseImage({
				  count: 3, //默认9
				  sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
				  sourceType: ['album', 'camera'], //从相册选择
				  success: function (res) {
						const obj = {
							uuid: new Date().getTime(),
							url: res.tempFilePaths[0]
						}
						// self.fileList = [...self.fileList, obj]
						self.uploadImageFile(obj)
				  }
				});
			},
			// 上传图片
			uploadImageFile(row) {
				const self = this
				uni.showLoading({
					title: '正在上传'
				})
				uni.uploadFile({
					url: config.baseUrl + '/upload/img',
					filePath: row.url,
					name: 'file',
					success(res) {
						uni.hideLoading()
						uni.showToast({
							title: '上传成功',
							icon: 'success'
						})
						const result = JSON.parse(res.data)
						const obj = {
							uuid: row.uuid,
							url: result.data
						}
						self.orderForm.imageList = [...self.orderForm.imageList, obj]
					},
					fail(err) {
						uni.hideLoading()
						uni.showToast({
							title: '上传失败',
							icon: 'none'
						})
					}
				})
			},
			// 删除已选择上传图片
			handleDelPhoto(uuid) {
				const newFileList = [...this.orderForm.imageList.filter(item => item.uuid !== uuid)]
				this.orderForm.imageList = newFileList
			},
			// 发布订单
			handlePublish() {
				const {address, type, weight, remark, createTime, imageList} = this.orderForm
				if(!this.currAddress) {
					uni.showToast({
						title: '请选择您的地址',
						icon: 'none'
					})
					return
				} else if(!createTime) {
					uni.showToast({
						title: '请选择回收时间',
						icon: 'none'
					})
					return
				} else if(!imageList.length) {
					uni.showToast({
						title: '请拍照上传',
						icon: 'none'
					})
					return
				}
				this.publishFn()
			},
			
			// 订单发布函数
			publishFn() {
				const params = {
					addressId: this.currAddress.id,
					appointTime: this.orderForm.createTime,
					classify1Id: this.orderForm.type,
					weight: this.orderForm.weight,
					remark: this.orderForm.remark,
					images: this.orderForm.imageList.map(item => item.url)
				}
				uni.showLoading({
					title: '正在发布'
				})
				this.$request.order.createOrder(params)
					.then(res => {
						uni.hideLoading()
						if(res.status === 200) {
							uni.showToast({
								title: '发布成功',
								icon: 'success',
								success() {
									uni.redirectTo({
										url: '../order/order'
									})
								}
							})
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
						}
					})
					.catch(() => {
						uni.hideLoading()
						uni.showToast({
							title: '发布失败',
							icon: 'none'
						})
					})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.publish {
		min-height: 100vh;
		padding: 20rpx;
		box-sizing: border-box;
		background: $primary;

		.header-row {
			background: $white;
			padding: 20rpx;
			margin-bottom: 20rpx;
		}

		.address {
			border: 1px solid $uni-border-color;
			border-radius: 8rpx;
			position: relative;
			padding: 14rpx;
			margin-bottom: 24rpx;
			.address-dialog {
				min-height: 20vh;
				max-height: 60vh;
				background: $white;
				overflow: auto;
				.plus-row {
					text-align: right;
					padding: 20rpx 20rpx 0;
					color: $primary;
				}
				.address-list {
					height: 100%;
					padding: 20rpx;
					.address-item {
						padding: 20rpx;
						background: $cu-bg;
						margin-bottom: 20rpx;
						transition: $transition;
						&:last-child {
							margin-bottom: 0;
						}
					}
					.active-item {
						background: $primary;
						.address-item-info {
							color: $white;
						}
					}
					.address-item-info {
						display: block;
						color: $uni-color-subtitle;
						padding: 18rpx;
					}
				}
			}
			.address-placeholder {
				color: $uni-text-color-placeholder;
				font-size: 26rpx;
			}

			.select-address {
				width: 158rpx;
				height: 36rpx;
				line-height: 36rpx;
				text-align: center;
				color: $uni-text-color-placeholder;
				position: absolute;
				right: 16rpx;
				top: 16rpx;
				display: block;
				border: 1px solid $uni-border-color;
				border-radius: 8rpx;
				font-size: 20rpx;
			}
		}

		.prod-type, .weight-list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.type-item, .weight-item {
				flex: 1;
				width: 50%;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 24rpx 0;

				.type-item-wrap, .weight-item-wrap {
					width: 240rpx;
					padding: 14rpx 0;
					background: $uncheck;
					color: $white;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 28rpx;
				}

				.active-item {
					background: $assist !important;
				}
			}
		}
		.publish-content {
			background: $white;
			padding: 20rpx;
			.create-time-row {
				padding-bottom: 30rpx;
			}
			.create-time-wrap {
				padding: 16rpx 0;
				border-bottom: 1rpx solid $uni-border-color;
				position: relative;
			}
			.time-title{
				font-size: 30rpx;
				color: $uni-text-color-placeholder;
				position: absolute;
				left: 0;
				top: 10rpx;
			}
			.weight-row {
				font-size: 30rpx;
				color: $uni-text-color-placeholder;
				padding-bottom: 30rpx;
				.weight-title {
					padding-bottom: 30rpx;
				}
			}
			.remark-row {
				padding-bottom: 30rpx;
				.remark-title {
					display: block;
					font-size: 30rpx;
					color: $uni-text-color-placeholder;
					padding-bottom: 30rpx;
				}
				.remark-ipt {
					width: 100%;
					min-height: 120rpx;
					display: block;
					border: 1rpx solid $uni-border-color;
				}
			}
			.photo-row {
				padding-top: 30rpx;
				padding-bottom: 30rpx;
				.photo-title-row {
					font-size: 30rpx;
					color: $uni-text-color-placeholder;
					// padding-bottom: 30rpx;
					padding-bottom: 16rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					border-bottom: 1rpx solid $uni-border-color;
					margin-bottom: 30rpx;
				}
				.photo-list {
					.photo-plus {
						width: 160rpx;
						height: 160rpx;
						border: 1rpx solid $uni-border-color;
						display: inline-flex;
						align-items: center;
						justify-content: center;
					}
				}
				.image-list {
					height: 160rpx;
					display: inline-block;
					float: left;
					margin-right: 10rpx;
					padding-bottom: 50rpx;
					.image-item-wrap {
						margin-right: 10rpx;
					}
				}
			}
		}
		.publish-row {
			padding: 20rpx 0;
		}
	}
</style>
